<template>
  <je-modal
    v-model:visible="visibleModule"
    width="460px"
    height="auto"
    title="添加事件"
    :resize="false"
    :maximizable="false"
    cancel-button
    :ok-button="addModule"
    @close="cancelModal"
  >
    <je-form ref="formRefModule" layout="vertical" autocomplete="off">
      <je-form-item label="名称" v-bind="validateInfos.name">
        <je-input v-model:value="modelRef.name" />
      </je-form-item>
      <je-form-item label="编码" v-bind="validateInfos.code">
        <je-input v-model:value="modelRef.code" />
      </je-form-item>
      <je-form-item label="适用范围" v-bind="validateInfos.scope">
        <je-select v-model:value="modelRef.scope">
          <je-select-option
            v-for="(item, index) in getScopedList"
            :key="index"
            :value="item.code"
            :style="`color: ${item.textColor}`"
          >
            <span :style="`color: ${item.textColor}`">{{ item.text }}</span></je-select-option
          >
        </je-select>
      </je-form-item>
    </je-form>
  </je-modal>
</template>
<script>
  import { defineComponent, ref, reactive, onBeforeMount, toRefs } from 'vue';
  import { Input, Modal, Form, Select } from '@jecloud/ui';
  import { verifyData } from '@/helper/regular';
  import { loadDDItemByCodes, getDDItemList } from '@jecloud/utils';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'ModalAdd',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeSelect: Select,
      JeSelectOption: Select.Option,
    },
    props: {},
    emits: ['changeData'],
    setup(props, { emit }) {
      const state = reactive({
        getScopedList: [],
      });
      //保存模块数据，关闭弹窗
      const visibleModule = ref(true);
      const modelRef = reactive({
        name: '',
        code: '',
        scope: 'PC',
        fire: '0',
        system: 0,
        func: '',
        // defalutValue: '',
        oldFunc: '',
      });
      const cancelModal = () => {
        visibleModule.value = false;
        emit('changeData', { type: 'cancel' });
      };
      const rulesRef = reactive({
        name: verifyData.name,
        code: [verifyData.required],
        scope: [
          {
            required: true,
            message: '该输入项为必填项',
          },
        ],
      });
      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        onValidate: (...args) => {},
      });
      const addModule = ({ $modal }) => {
        const modal = $modal;
        //保存数据逻辑
        validate()
          .then(() => {
            emit('changeData', { type: 'save', ...modelRef });
            modal.colse();
          })
          .catch(() => {});
        return false;
      };
      onBeforeMount(() => {
        loadDDItemByCodes(['JE_META_USE_SCOPE']);
        state.getScopedList = getDDItemList('JE_META_USE_SCOPE') || [
          { code: 'ALL', text: '全部', textColor: '', icon: 'fal fa-phone-laptop' },
          { code: 'APP', text: '移动端', textColor: '#02A863', icon: 'fal fa-mobile-phone' },
          { code: 'PC', text: '电脑端', textColor: '#3265F5', icon: 'fal fa-laptop' },
        ];
      });

      return {
        validateInfos,
        resetFields,
        modelRef,
        cancelModal,
        addModule,
        visibleModule,
        centered: true,
        ...toRefs(state),
      };
    },
  });
</script>
